

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<style>
    body{
        margin: 0;/*去掉外边距*/
        background-size: cover;/*设置封面*/
        /*background-image: url('reg1.jpg');*/
        height: 700px;
        background-size: cover;
    }

    h1{
        font-size: 72px;
        color: #0096dc;
        margin-bottom: 0;
    }
    img{
        width: 100px;
    }
    h2{
        font-size: 32px;
        color:black;
        font-family: Stfangsong;
        margin-bottom: 0;

    }
    #head{
        height:120px;
        border: 1px solid white;
        width: 100%;
        padding: 0;
        /*        background-color: antiquewhite;*/

    }
    #head>img{
        margin-left: 150px;
        margin-top: 30px;
        float: left;
    }
    ul,li{
        list-style-type: none;
    }
    ul{
        float: left;
    }
    .c1{
        display: block;
        padding-left: 30px;
        font-size: 14px;
        color: #3f3f3f;
        height: 36px;
        line-height: 36px;
        background-position: 0 -39px;
        float: left;

    }
    h3{
        float: right;
        margin: 60px 100px;
        font-size: 50px;
        color: salmon;
        font-family: Stfangsong;
    }
    a{
        text-decoration: none;
        color: #3f3f3f;
    }
</style>
<div id="app">
    <el-container>
        <el-header style="height: 100px">
            <div style="background: rgba(255,255,255,0.3);">
                <img src="imgs/login_logo.png" alt="" style="width: 200px;height: 100px">
                <span style="position: absolute;top:50px;right: 100px;font-size:30px;margin: 0 auto;">欢迎来到XXXX商城</span>
            </div>
        </el-header>
        <el-main style="background-image: url('imgs/reg.jpg');height: 700px">
            <el-card style="width: 600px;height: 500px;margin: 50px auto;
    background-color: rgba(255,255,255,0.3);">
                <div>
                    <span style="color:black;font-size: 30px">新用户注册</span>
                    <a href="" style="float: right;margin-right: 40px;margin-top:12px;font-size: 20px;text-decoration: none;color: #333">直接登录</a>
                </div>
                <div style="background: black;height: 2px;margin: 8px 0"></div>
                <el-form label-width="60px" style="width: 400px;margin: 50px auto">
                    <el-form-item>
                <span slot="label">
                    <span style="color: black">用户名</span>
                </span>
                        <el-input type="text" v-model="user.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item>
                <span slot="label">
                    <span style="color: black">密码</span>
                </span>
                        <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                <span slot="label">
                    <span style="color: black">手机号</span>
                </span>
                        <el-input type="text" v-model="user.phone" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 200px">
                <span slot="label">
                    <span style="color: black">验证码</span>
                </span>
                        <el-input type="text" placeholder="请输入验证码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="position: relative;left: 100px;"
                                   type="primary" @click="reg()">注册</el-button>
                    </el-form-item>
                </el-form>
            </el-card>

        </el-main>
        <el-footer>
            <div style="padding:10px 0;text-align: center; margin-top:0px; color: #808080; width: 100%" >
                <template>
                    <div style="margin-top: 20px">
                        <a href="">首页</a><el-divider direction="vertical"></el-divider>
                        <a href="">热点资讯</a><el-divider direction="vertical"></el-divider>
                        <a href="">商家入驻</a><el-divider direction="vertical"></el-divider>
                        <a href="">社会招聘</a><el-divider direction="vertical"></el-divider>
                        <a href="">校园招聘</a><el-divider direction="vertical"></el-divider>
                        <a href="">帮助</a><br>
                        <div style="margin-top: 20px">
                            <span>京ICP证041189号</span>
                            <span>出版物经营许可证</span><el-divider direction="vertical"></el-divider>
                            新出发京批字第直0673号<el-divider direction="vertical"></el-divider>
                            <span > 食品经营许可证：JY11101050363440</span> <br>
                            <div style="margin-top: 10px">
                                <span>京ICP备17043473号-1</span><el-divider direction="vertical"></el-divider>
                                <span>京公网安备11010502037644号</span><el-divider direction="vertical"></el-divider>
                                <span>经营许可证编号：合字B2-20160011</span><el-divider direction="vertical"></el-divider>
                                <span>互联网药品信息服务资格证</span>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </el-footer>
    </el-container>
</div>



</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                user:{
                    username:"",
                    password:"",
                    phone:""
                }
            }
        },
        methods:{
            reg(){
                axios.post("/user/reg",v.user).then(function (response) {
                    if(response.data==1){
                        alert("注册成功")
                        location.href = "/login.html";
                    }else if(response.data==2){
                        v.$message.error("电话号格式不正确")
                    }else if(response.data==3){
                        v.$message.error("该电话号以及注册过")
                    }else {
                        v.$message.error("用户名已存在")
                    }
                })
            }

        }
    })
</script>
</html>